<template>
  <el-container style="height: 100%">
    <el-col :span="16" style="height: 100%; overflow: hidden">
      <el-row :gutter="20">
        <el-col :span="8">
          <mySearch
            :searchType="this.searchType"
            :handleSearchSelectInputChange="this.handleSearchSelectInputChange"
            :searchTypeOptions="this.searchTypeOptions"
            :searchTypePlaceholder="this.searchTypePlaceholder"
            :searchInputKey="this.searchInputKey"
            :searchInputChange="this.searchInputChange"
          ></mySearch>
        </el-col>
      </el-row>
      <div class="mask">
        <el-container style="height: 96%">
          <el-table
            :data="achievementList"
            stripe
            sortable
            style="width: 100%; height: 100%"
            highlight-current-row
            @current-change="handleCurrentChange"
          >
            <el-table-column type="index" label="#" width="40">
            </el-table-column>
            <el-table-column
              prop="achievementName"
              label="业绩名称"
              width="180"
              sortable
            >
            </el-table-column>
            <el-table-column
              prop="achievementType"
              width="100"
              label="业绩类别"
              sortable
            >
            </el-table-column>
            <el-table-column prop="author" label="用户名称" sortable>
            </el-table-column>
            <el-table-column prop="college" label="学院单位" sortable>
            </el-table-column>
            <el-table-column
              prop="subject_classification"
              label="学科分类"
              sortable
            >
            </el-table-column>
            <el-table-column
              prop="budget"
              label="预算资金"
              width="120"
              sortable
            >
            </el-table-column>
            <el-table-column prop="status" label="审批" width="90" sortable>
              <template slot-scope="scope">
                <i
                  style="color: red"
                  v-if="scope.row.status == 0"
                  class="el-icon-s-opportunity"
                ></i>
                <i
                  style="color: green"
                  v-if="scope.row.status == 1"
                  class="el-icon-s-opportunity"
                ></i>
              </template>
            </el-table-column>
          </el-table>
          <el-footer height="60px">
            <myPagination
              :sizeChange="sizeChange"
              :currentChange="currentChange"
              :queryInfo="queryInfo"
              :total="total"
            ></myPagination>
          </el-footer>
        </el-container>
      </div>
    </el-col>
    <el-col :span="8" style="height: 100%; overflow: hidden" class="manageCol">
      <myAchievementMagage
        :achievementManageContainerIsShow="achievementManageContainerIsShow"
      ></myAchievementMagage>
    </el-col>
  </el-container>
</template>

<script>
import myBreadcrumb from "../myBreadcrumb.vue";
import myPagination from "../myPagination.vue";
import mySearch from "../mySearch.vue";
import myAchievementMagage from "./myAchievementManage.vue";
import { mapState } from "vuex";
export default {
  name: "myUsersList",
  components: {
    myBreadcrumb,
    myPagination,
    mySearch,
    myAchievementMagage,
  },
  data() {
    return {
      // 获取用户列表的参数对象
      queryInfo: {
        query: "",
        // 当前的页数
        pagenum: 1,
        // 当前每页显示多少条数据
        pagesize: 10,
      },
      achievementList: [],
      // 总人数
      total: 0,
      breadcrumbData: ["用户管理", "用户列表"],
      // 搜索placeholder
      searchType: "achievementName",
      searchInputKey: "",
      searchTypePlaceholder: "搜索用户姓名",
      searchTypeOptions: [
        {
          value: "achievementName",
          label: "业绩名称",
        },
        {
          value: "status",
          label: "审批状态",
        },
        {
          value: "achievementType",
          label: "业绩类别",
        },
        {
          value: "college",
          label: "学院单位",
        },
        {
          value: "subject_classificationVal",
          label: "学科分类",
        },
        {
          value: "author",
          label: "作者",
        },
      ],
      // 操作
      achievementManageContainerIsShow: false,
    };
  },
  methods: {
    async getAchievementList() {
      this.$axios
        .get("admin/achievementList", {
          params: {
            queryInfo: this.queryInfo,
            searchType: this.searchType,
          },
        })
        .then(({ data: res }) => {
          if (res.status !== 200) {
            return this.$message.error("获取业绩列表列表失败");
          }
          //   console.log(res.data);
          this.achievementList = res.data;
          this.total = res.total;
          // console.log(this.achievementList);
        });
    },
    sizeChange(newSize) {
      this.queryInfo.pagesize = newSize;
      this.getAchievementList();
    },
    currentChange(newPage) {
      this.queryInfo.pagenum = newPage;
      this.getAchievementList();
    },
    async userStateChange(data) {
      const { data: res } = await this.$axios.get(
        `users/${data.id}/state/${data.mg_state}`
      );
      // console.log(res);
      if (res.meta.status !== 200) {
        data.mg_state = !data.mg_state;
        return this.$message.error("用户更新状态失败");
      }
      this.$message.success("用户更新状态成功");
    },
    handleSearchSelectInputChange(val) {
      try {
        this.searchTypeOptions.forEach((item) => {
          if (item.value == val) {
            this.searchTypePlaceholder = `搜索${item.label}`;
            this.searchType = item.value;
            throw new Error("");
          }
        });
      } catch (err) {}
    },
    async searchInputChange(val) {
      this.searchInputKey = "";
      this.searchInputKey += val;
      this.queryInfo.query = this.searchInputKey.trim();
      //   console.log("searchInputChange");
      //   console.log(this.searchType, this.searchInputKey);
      this.getAchievementList();
    },
    handleCurrentChange(val) {
      this.achievementManageContainerIsShow = true;
      this.$bus.$emit("handleAchievementType", {
        data: val,
      });
    },
  },
  mounted() {
    this.$bus.$on("getAchievementList", this.getAchievementList);
  },
  computed: {
    ...mapState(["moreUserInfo", "collegeList"]),
  },
  created() {
    this.getAchievementList();
  },
  beforeDestroy() {
    this.$bus.$off("getAchievementList");
  },
};
</script>

<style lang="less" scoped>
.searchBox {
  display: flex;
  width: 100%;
}
.mask {
  width: 100%;
  height: 100%;
}
.registerCol {
  border-left: 1px solid rgba(0, 0, 0, 0.1);
  height: 100%;
}
.registerTitle {
  font-size: 26px;
  text-align: center;
}
</style>

